SVG stands for Scalable Vector Graphics. It is a family of specifications of an XML-based file format. SVG is used for describing two-dimensional vector graphics, both static and dynamic (i.e. interactive or animated). An SVG document can define components including shapes, gradients, etc.
Although the canvas element is the big news in HTML5, an old friend in the form of SVG has also joined the ranks of the new technologies. HTML5 allows you to embed SVG in your documents to create highly interactive animated effects by directly using <svg>tag.
In this post, we collect 15 video related HTML5 SVG examples for inspiration of your web developing project. Hope you will find it useful.
1.Styling a video using an external SVG resource as a mask
<head>
<title>Guide to HTML5 video: chapter 5: example 1</title>
<style>
.target {
mask: url("code_c5_1.svg#c1");
-webkit-mask-box-image: url("code_c5_1.svg");
}
</style>
</head>
This video related HTML5 SVG example creates a round interactive UI that when you click it, there will be gradually varied shadow and the glowing star clusters will disappear gradually. The process bar is on the bottom of the circle.
2. Two SVG masks as used by Firefox with “objectBoundingBox”
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<mask id="c1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
<circle cx="0.5" cy="0.5" r="0.5" fill="white"/>
</mask>
<mask id="c2" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
<circle cx="0.25" cy="0.25" r="0.5" fill="white"/>
</mask>
</defs>
</svg>
It is an ellipse interactive video effects with two SVG masks. If you click the image or the process bar, the video will play in the left ellipse.
3. Manipulating inline SVG with JavaScript in Firefox
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<mask id="c1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
<circle cx="0.25" cy="0.25" r="0.5" fill="white"/>
</mask>
</defs>
</svg>
This HTML5 SVG example is formed by a part of an ellipse and a rectangle. There are volume icon and time of the video besides the process bar in the rectangle. The video are playing in the joint part of these two SVG masks.
4. Styling a video using an external SVG resource as a mask
<head>
<title>Guide to HTML5 video: chapter 5: example 4</title>
<style>
.target {
mask: url("code_c5_4.svg#textClip");
-webkit-mask: url("code_c5_4.svg");
}
</style>
</head>
This HTML5 SVG video example uses an external SVG resource as a mask. The video is auto playing with the star clusters appear and disappear in seconds. There is no process bar in this HTML5 SVG example.
5. Running your own controls in SVG
<svg width="100%" height="100%">
<g class="svgbutton">
<circle stroke="black" fill="transparent" stroke-width="12" cx="240" cy="135" r="40"
onclick="togglevideo();"/>
<path class="play" fill="black" d="M 230 120 v 30 l 25 -15 Z"/>
<path class="pause" stroke-width="12" stroke="black" d="M 230 120 v 30 m 16 -30 v 30"/>
</g>
</svg>
In this HTML5 SVG example, there is a play/pause button in the middle of the video, and then you can run your own controls in the process of SVG effect.
6. A SVG mask with a gradient
<head>
<title>Guide to HTML5 video: chapter 5: example 6</title>
<style>
.target {
mask: url("code_c5_6.svg#c1");
-webkit-mask: url("code_c5_6.svg");
}
</style>
</head>
This example is much more like the first one motioned above. The biggest difference is that this SVG example of video has a color gradient in the background.
7. A SVG mask with a pattern
<head>
<title>Guide to HTML5 video: chapter 5: example 7</title>
<style>
.target {
mask: url("code_c5_7.svg#c1");
-webkit-mask: url("code_c5_7.svg");
}
</style>
</head>
This SVG mask with a pattern also uses an external SVG resource. There are process bar and volume bar below the round image with spots around. The time displayed is the current play time of the video.
8. A SVG clip-path used with the controls
<svg width="100%" height="100%">
<g class="svgbutton">
<circle stroke="black" fill="transparent" stroke-width="12" cx="240" cy="135" r="40"
onclick="togglevideo();"/>
<path class="play" fill="black" d="M 230 120 v 30 l 25 -15 Z"/>
<path class="pause" stroke-width="12" stroke="black" d="M 230 120 v 30 m 16 -30 v 30"/>
</g>
</svg>
In this HTML5 SVG example, there is also a play/pause button in the middle of the five pointed star interactive video player for your control of the video.
9. A SVG defined blur filter applied to a video
<svg height="0">
<defs>
<filter id="f1">
<feGaussianBlur stdDeviation="3"/>
</filter>
</defs>
</svg>
It is a HTML5 video example with a SVG defined blur filter added. It is played by your click and it also has process bar and volume control icon.
10. An animated circle in SVG
<head>
<title>Guide to HTML5 video: chapter 5: example 12</title>
<style>
.target {
mask: url("code_c5_12.svg#c1");
-webkit-mask: url("code_c5_12.svg");
}
</style>
</head>
This HTML5 video example has animated effects with two sides of the circle automatically scaling. It is also an interactive HTML5 SVG example that needs your mouse click to play.
11. A motion animation in SVG used as a mask
<head>
<title>Guide to HTML5 video: chapter 5: example 13</title>
<style>
.target {
mask: url("code_c5_13.svg#c1");
-webkit-mask: url("code_c5_13.svg");
}
</style>
</head>
This is an example of motion animation in SVG used as a mask. The red ball of the video player is moving while the video is auto playing when you access to this website.
12. Inline SVG with a video element in XHTML
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="480px" height="270px">
<g id="video">
<foreignObject width="480px" height="270px">
<body xmlns="http://www.w3.org/1999/xhtml" style="margin:0;">
<video class="target" height="270" width="480" controls="controls">
<source src="HelloWorld.mp4" type="video/mp4"/>
<source src="HelloWorld.webm" type="video/webm"/>
<source src="HelloWorld.ogv" type="video/ogg"/>
</video>
</body>
</foreignObject>
<video class="target" height="270" width="480" controls="controls" xlink:href="HelloWorld.ogv">
</video>
</g>
</svg>
This HTML5 SVG video example is played by clicking. The difference in effects of video playing is that when the text disappeared, the color of the background will change gradually.
13. SVG code for a video reflection
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="480px" height="540px">
<defs>
<linearGradient id="grad" y2="1" x2="0">
<stop offset="0.2" stop-color="white" stop-opacity="0"/>
<stop offset="1" stop-color="white" stop-opacity=".4"/>
</linearGradient>
<mask id="c1" maskContentUnits="objectBoundingBox">
<rect width="1" height="1" fill="url(#grad)"/>
</mask>
</defs>
<g id="reflection">
<g id="video">
<foreignObject width="480px" height="270px">
<body xmlns="http://www.w3.org/1999/xhtml" style="margin:0;">
<video height="270" width="480" autoplay="autoplay">
<source src="HelloWorld.mp4" type="video/mp4"/>
<source src="HelloWorld.webm" type="video/webm"/>
<source src="HelloWorld.ogv" type="video/ogg"/>
</video>
</body>
</foreignObject>
<video height="270" width="480" xlink:href="HelloWorld.ogv"/>
</g>
<use xlink:href="#video" transform="scale(1 -1) translate(0 -540)" mask="url(#c1)"/>
</g>
</svg>
This HTML5 SVG video example has SVG code to create a video reflection, and this video has no process bar.
14. SVG code for edge detection
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="480px" height="540px">
<defs>
<filter id="c1">
<feConvolveMatrix order="3" kernelMatrix="1 1 1
1 -8 1
1 1 1"
preserveAlpha="true"/>
</filter>
</defs>
<video height="270" width="480" xlink:href="HelloWorld.ogv" filter="url(#c1)"/>
<defs>
<g id="video">
<foreignObject width="480px" height="270px">
<body xmlns="http://www.w3.org/1999/xhtml" style="margin:0;">
<video height="270" width="480" autoplay="autoplay">
<source src="HelloWorld.mp4" type="video/mp4"/>
<source src="HelloWorld.webm" type="video/webm"/>
<source src="HelloWorld.ogv" type="video/ogg"/>
</video>
</body>
</foreignObject>
</g>
</defs>
<use xlink:href="#video" filter="url(#c1)"/>
</svg>
This HTML5 video is designed by SVG code for edge detection. The video is auto playing without a process bar when the website is opened.
15. Several composite SVG filter definitions
<svg height="0">
<defs>
<filter id="f1" x="0%" y="0%" width="100%" height="100%">
<feFlood flood-color="blue" result="A"/>
<feColorMatrix type="matrix" in="SourceGraphic" result="B"
values="1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
1 1 1 0 0"/>
<feMerge>
<feMergeNode in="A"/>
<feMergeNode in="B"/>
</feMerge>
</filter>
<filter id="f2">
<feGaussianBlur in="SourceAlpha" stdDeviation="4" result="A"/>
<feOffset in="A" dx="4" dy="4" result="B"/>
<feSpecularLighting in="A" surfaceScale="5" specularConstant=".75"
specularExponent="20" lighting-color="#bbbbbb"
result="C">
<fePointLight x="-5000" y="-10000" z="20000"/>
</feSpecularLighting>
<feComposite in="C" in2="SourceAlpha" operator="in" result="C"/>
<feComposite in="SourceGraphic" in2="C" operator="arithmetic"
k1="0" k2="1" k3="1" k4="0" result="D"/>
<feMerge>
<feMergeNode in="B"/>
<feMergeNode in="D"/>
</feMerge>
</filter>
<filter id="f3">
<feGaussianBlur in="SourceGraphic" stdDeviation="6" result="A"/>
<feConvolveMatrix order="3" kernelMatrix="1 -1 1 -1 -0.01 -1 1 -1 1" edgeMode="none" result="B"/>
<feMerge>
<feMergeNode in="A"/>
<feMergeNode in="B"/>
</feMerge>
</filter>
<filter id="f4">
<feColorMatrix values="1 1 0 0 0
0 0 1 0 0
0 0 0 1 0
0 0 0 0 1"
style="color-interpolation-filters:sRGB" result="A"/>
<feConvolveMatrix filterRes="100 100" style="color-interpolation-filters:sRGB"
order="3" kernelMatrix="0 -1 0 -1 4 -1 0 -1 0" preserveAlpha="true" in="A"/>
</filter>
</defs>
</svg>
This video related HTML5 SVG example has four video players with different effects of blue, grey, etc. Each one has a video process bar for your click to play.
OK, you may look deep into the code of the above examples and learn to start your own video animation. If you have some other great examples, please share with us in the comment below. Thanks!
